<template>
  <div class="loginPage">
    <!-- <h1>中亿财经云服务平台</h1> -->
    <!-- <img class="loginPage-logo" src="/static/images/logo.png" alt=""> -->
    <img class="loginPage-img" src="/static/images/index.png" alt="">
    <div>
      <button class="loginPage-login" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="!accessToken">进入小程序</button>
      <!-- <button class="index-login" v-if="!accessToken&&phoneData.iv" @click="login()">点击进入</button> -->
      <div>
        <mp-loadmore type="loading" v-if="pload" loadingText="" />
      </div>
    </div>
    <div class="loginPage-footer">
      <!-- <p>京ICP备14044511号&nbsp;&nbsp;&nbsp;&nbsp;环线科技有限公司提供技术</p> -->
    </div>
  </div>
</template>
<script>
import { setStorage } from '@/utils/wechat'
import { login } from '@/utils/api'
export default {
  data () {
    return {
      loading: false
    }
  },
  onShow () {
    wx.removeStorage({
      key: 'accessToken',
      success: () => {
        console.log('clear')
      }
    })
  },
  methods: {
    getPhoneNumber (e) {
      if (e.mp.detail.errMsg === 'getPhoneNumber:fail user deny') {
        // wx.showModal({
        //   title: '提示',
        //   showCancel: false,
        //   content: '未授权',
        //   success: (res) => { }
        // })
        console.log('未授权')
      } else {
        // console.log(333)
        this.phoneData = e.mp.detail
        wx.login({
          success: async (r) => {
            console.log(r)
            this.pload = true
            if (r.code) {
              this.appCode = r.code
              this.login()
            }
          }
        })
      }
    },
    async login () {
      try {
        let res = await login({
          iv: this.phoneData.iv,
          encryptedData: this.phoneData.encryptedData,
          code: this.appCode
        })
        // console.log(res)
        await setStorage('accessToken', {
          token: res.accessToken,
          expires: Date.now() + 1 * 24 * 60 * 60 * 1000
        })
        this.accessToken = res.accessToken
        if (this.accessToken) {
          this.$emit('loginEvent')
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
<style lang="scss">
.loginPage {
  h1 {
    color: $color-primary;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    padding-top: 60px;
  }
  &-img {
    margin: 0 auto;
    width: 750px;
    height: 885px;
    display: block;
    margin-top: 50px;
  }
  // &-logo {
  //   width: 196px;
  //   height: 52px;
  //   display: block;
  //   margin: 0 auto;
  //   margin-top: 30px;
  // }
  &-login {
    width: 360px;
    height: 100px;
    margin: 0 auto;
    border: 0;
    color: $color-primary;
    font-size: 40px;
    text-align: center;
    border-radius: 50px;
    border: 1px solid $color-primary;
    background-color: #fff;
  }
  &-footer {
    font-size: 26px;
    position: fixed;
    bottom: 10px;
    width: 100%;
    text-align: center;
    color: $color-font-content;
    p {
      // text-align: center;
    }
  }
}
</style>

